<template>
  <div class="search">
    <component :is="o.tag" v-for="(o, index) in eleList" :value="o.value" :label="o.label" :key="index" @input="inputVale($event, o.key)"></component>
  </div>
</template>

<script>
export default {
  props: ['value'],
  components: {
    elInput: require('./el-input.vue').default,
    elSelect: require('./el-select.vue').default
  },
  data () {
    return {
      eleList: [],
      form: this.value
    }
  },
  mounted () {
    this.eleList = this.$slots.default.filter(u => u.tag).map(u => {
      cl(u)
      return {
        value: u.data ? u.data.attrs.value : '',
        tag: u.tag,
        key: u.data ? u.data.key : '',
        label: u.data ? u.data.attrs.label : ''
      }
    })
  },
  methods: {
    inputVale (value, key) {
      this.form[key] = value
      this.$emit('input', this.form)
    }
  }
}
</script>

<style>
.search{
  width: 300px;
  height: 300px;
  border: 1px solid #e1e1e1;
}
</style>
